El post-footer es el bloque que contiene los datos que vemos a continuación de el post, contiene el número de comentarios, etiquetas, autor, el sobrecito de envío de entradas por correo, evaluación de estrellas, reacciones, hora, ubicación.


Si somos de los que prescindimos de la mayoría de esos complementos hay una forma de personalizar el post-footer bastante original, la añadí hace poco a esta plantilla
Para realizar ese cambio debemos tener claro lo que vamos a hacer y que estos ejemplos son para una plantilla Minima sin modificar es decir con un ancho de 660px aunque de ser más ancha no sería problema, es necesario eliminar todo el contenido de la plantilla que se encuentra en:

<div class='post-footer-line post-footer-line-1'>
<div class='post-footer-line post-footer-line-2'>
<div class='post-footer-line post-footer-line-3'>

Una vez eliminamos ese contenido lo único que se mostrará en el post-footer es el nombre de autor, las etiquetas y el número de comentarios.
Lo primero que haremos será descargar una copia de la plantilla y a ser posible probar antes en otro blog. Marcamos para expandir la plantilla y buscamos:
<!-- clear for photos floats -->

unas líneas más abajo veremos:
<div class='post-footer'>

Eliminaremos todo lo que se encuentra incluido dentro de
<div class='post-footer'> y </b:includable>

<div class='post-footer'>
código...
código...
código...
código...
</b:includable>

y en su lugar añadimos el contenido de este archivo.
Luego localizamos los antiguos estilos para el post-footer, según plantilla sería algo así:

.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}

los eliminamos y en su lugar añadimos:
Ver código de estilos [+/-]

Miramos en vista previa, si el número de etiquetas que normalmente usamos supera ese espacio lo solucionamos modificando en los estilos de la siguiente forma:


En los estilos de .post-footer aumentamos el valor height de esa forma le damos más altura.
Para las líneas de separación tengan la misma altura del contenido aumentamos en .post-footer li .post-labels también el valor height.


El color de las líneas aparece como #990000 igual que en los enlaces que también podemos cambiarlo en color;#990000.
Para el efecto hover del enlace está definido con color:#000000
Coke (Jorge)

Gema tengo una duda desde hace un tiempo, he encontrado una web que tiene un efecto que me encanta, a mi me gustaria saber si es posible para blogger...
Mira el efecto que me gustaria saber como se hace es aquel que esta en esta web: http://urban-designs.org/indexx.php ahi donde dice "Elite Affiliates" eso de poner el mouse sobre el numero y que muestre la imagen de referencia, a ver si puedes ayudarme con eso GRACIAS GEMA
Por cierto que buena manera de perzonalizar el post-footer hay muxa gente que veo que reclama por que la forma en q' viene en las plantillas clasisa son antiesteticos :X pero esta manera de perzonalizarla es genial, asi que chicos a trabajar!!!!

Responder
Gem@

:: Creo que es posible, pero no sabría decirte como hacerlo. A simple vista se ve que está creado con una tabla y el efecto onmouseout en cada imagen, los botones son el enlace a las páginas y la imagen de fondo está añadida en la misma tabla pero nunca he probado a hacerlo.
Si le preguntas a J.Miur quizás él pueda orientarte mejor http://vagabundia.blogspot.com/

Responder
famg

gracias me has ayudado mucho a la hora de crear blog c agradece.

http://letalweb.blogspot.com/

espero te guste el blog gracias.

Responder
Dat Tai

useful blog

Responder
Gem@

:: Me alegra que así sea famg, gracias por comentar ;)

:: Thanks Dat Tai :)

Responder
Graciela

Ohhh sí lo he logrado!!! días borrando y poniendo códigos, ahora solo me falta darle mi toque jajaja

Los relacionados no salen, veré si algo está mal o te consulto Piedra Preciosa...good bye and kisses :P

Responder
Gem@

:: Quedó muy bien Graciela, los relacionados al menos esa parte que se añade en e lpost-footer no salen porque al eliminar post-footer-line post-footer-line-1 la 2 y la 3 se ha eliminado parte de los relacionados.
Si recuerdas la forma que lo añdiste, es decir de dónde sacaste las indicaciones para los relacionados podemos intentar añadirlos justo después de los datos del post-footer.

Responder
Graciela

De donde lo he sacado :O olvida no lo recuerdo :)
Estaba colocado de esta manera:
b:if cond='data:blog.pageType == "item"'

pArtículos relacionados:
script type='text/javascript'
removeRelatedDuplicates();
printRelatedLabels();
script
/p

Responder
Graciela

No se si entenderás, cómo se coloca un código en el comentario, sin que de error

Responder
Gem@

:: Miraré si coincide con alguna explicación de J.Miur.
A tu segundo comentario, es necesario convertir el código a texto plano si quieres jugar... %% Convertir texto plano :)

Responder
Graciela

Muy bien mi chica, desconocía lo del texto plano :D

Responder
Gem@

:: Muy bie nGraciela creo que ya he dado con la forma que aplicaste los post relacionados voy a probar en mi blog y te digo aquí mismo ;)

Responder
Gem@

:: Graciela necesito tu mail para decirte la forma de solucionar ese problema y no lo veo en tu blog :S
si no lo quieres dejar aquí el mío es forevergema(arroba)gmail.com

Responder
Graciela

jijiji está sobre el formulario de comentar
gracielaroth_60@hotmail.com

Gracias Piedra Preciosa _D

Responder
Graciela

Ya está :) mil mil gracias, sí que lo sabes buscar!!!

Besos + besos + besos :P

Responder
Gem@

::: Bien al final todo solucionado :)

Responder
Graciela

Aquí llegué nuevamente, tesoro el ícono de subir dentro del post.footer:
coloco a la imagen 'right' y no se posiciona a la derecha, puedes decirme si se le agrega algo más.

Gracias, besos :)

Responder
Gem@

:: Hola Graciela!!

Mira sitúate en la parte que modificaste era:
<div class='post-footer'>
allí añadimos tres cosas, los comentarios, etiquetas y datos de autor.
Hay que buscar los datos de autor y añadir lo que he marcado en negrita.

<li>
<div class='head'>Autor</div>
<span class='post-author vcard'>
<span style='float:right;margin-top: 0;'>
<a href='#outer-wrapper' onclick='new Effect.ScrollTo(&quot;outer-wrapper&quot;,{offset:-140}); return false' rel='nofollow'><img src='http://1.bp.blogspot.com/_2jIweJlMqPI/Sco0v6UBOkI/AAAAAAAAECM/aN9nl0y3nj4/s320/gtk-home.png2.png'/></a>
</span>

<b:if cond='data:top.showAuthor'>
<span class='fn'><data:post.author/></span>
</b:if>
</span></li>

Responder
Gem@

:: Olvidé decirte que eso es para el efecto deslizante, si prefieres ir a inicio si ese efecto entonces sustituye esa parte en negrita por el que tienes ahora.

Responder
Graciela

Mejor imposible :D muchas gracias por tu ayuda, que tengas un día bonito, si precisas algo de calor te lo enviamos -nos está sobrando :O

Besos!

Responder
Gem@

:: Que bien Graciela aquí llueve desde hace dos días y ha bajado la temperatura, encima tengo un resfriado que no veas :S

Responder
Graciela

Entonces te envio unas aspirinas con un té con leche, tengo suerte de no resfriarme y toco madera, porque es insoportable estar congestionada, dolor de cabeza y demás.

Responder
Gem@

:: No me resfrió mucho Graciela, una vez cada invierno parece que esté programada :S

Responder
¡AVE MARÍA Y ADELANTE!

S.O.S. Gemaaa!
una pregunta... como se llaman esas ventanas con propaganda o aviso que aparecen al ingresar a una página? se llaman "pop up"? porque quiero poner una en mi blog por unos días, para que cuando ingresen los visitantes lo primero que vean sea esa propaganda.

xfis!!

Responder
¡AVE MARÍA Y ADELANTE!
Este comentario ha sido eliminado por el autor.
Responder
¡AVE MARÍA Y ADELANTE!

P/D: te escribe Celina.

Responder
Gem@

:: Hola Celina, lo más parecido a eso es un cartel de aviso flotante, lo que puedes ver en la siguiente url:
http://gemablog-.blogspot.com/2008/10/cartel-de-aviso-flotante.html

Responder
Monica Custodio

Buenos días Gema,
Tengo un problema con el post-footer .....
Resulta que añado cosas al mismo, por ejemplo los nuevos botones de compartir, etc..... y no se me ven. Es como si el post footer que tengo no tuviera suficiente tamaño como para visualizar todo. Pero no se qué debo tocar para solucionarlo. Me tocas con tu varita mágica? :D

Hoy he añadido a la plantilla los botones de www.addthis.com que me chiflan ya que añaden la opción "imprimir" y tampoco se ve.

Gracias.

Responder
Gem@

:: Hola Mónica :) intenta de esta forma...
Marca para expandir la plantilla y busca la siguiente línea:
<div class='post-footer-line post-footer-line-3'/>

justo después añade el código proporcionado por AddThis, la verdad que es una opción muy sencilla y de las pocas que añade todo en una.
Cuanto más veo la imagen de tu perfil más me gusta, que maravillas haces Mónica me encantan!!

Responder
Gem@

:: Olvidé decirte qu eel cambio de imagen ha sido un acierto :)

Responder
Monica Custodio

Ha funcionado! ha funcionado!
Muchísimas gracias por tu ayuda Gema. Gracias a ti estoy consiguiendo tener el blog que soñaba para mis muñecas :-))

Responder
Monica Custodio

me alegra muchísimo tu comentario sobre el cambio de imagen de mi blog. Ya sabes lo que cuesta .....

Responder
Gem@

:: La imagen del blog es como una tarjeta de presentación dice mucho no sólo de la temática sino del autor/ra de sus gustos y su personalidad :D cuesta mucho conseguir lo que tenemos en mente, en tu caso ha quedado estupenda y es que esas muñequitas enamora.
¿Cuando harás Monnadas blogueras con su ordenador ? jajajajaja

Responder
Monica Custodio

Ni te imaginas cómo agradezco tus palabras y la ilusión que me hacen ..... Si, no? Falta una Monnada con ordenador .......

Responder
Gem@

:: Bueno, era una sugerencia porque muchas nos veremos identificadas en ella :D

Responder
Monica Custodio

a este paso yo incluida, ja, ja.

Responder
LAdriana

Hola Gema, este blog tuyo es una biblia! jeje.
Buscando como agregar los botones de compartir en redes sociales (porque vaya a saber porqué no me alcanzaba con habilitarlos desde elementos de la página) (plantilla maldita!). Encuentro la solución en los comentarios, como tantas veces lo más sencillo está en nuestras narices, addthis y listo! Gracias!!!!! (genia tu, como siempre!!) :D

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top